<template>
    <div>
        <div class="btn-group">
            <mt-button size="large" type="danger" @click.native="storeListVisible=!storeListVisible">{{shop_name}}</mt-button>
            <mt-button size="large" type="danger" plain @click.native="statusVisible=!statusVisible">订单状态:{{order_status}}</mt-button>
            <mt-button size="large" type="danger" plain @click.native="()=>{$refs.picker.open();isStart = true}">开始时间:{{timestampToTime(start_time)}}</mt-button>
            <mt-button size="large" type="danger" plain @click.native="()=>{$refs.picker.open();isStart = false}">结束时间:{{timestampToTime(end_time)}}</mt-button>
            <mt-button size="small" type="danger" plain @click.native="search()">查询</mt-button>
        </div>
        <div class="order-content">
            <p v-if="!order_list.length" class="no-data">{{timestampToTime(start_time)}}-{{timestampToTime(end_time)}}暂无订单查询</p>
            <mt-cell :title="item.order_no" v-for="(item,index) of order_list" :key="index">
                <p>
                    <span class="price">￥{{item.goods_price}}</span>
                    <span>{{item.financial_status?'已结算':'未结算'}}</span>
                </p>
            </mt-cell>
            <div class="line" v-if="order_list.length">加载完成</div>
        </div>
        <mt-cell title="未结算金额">
                <span class="all-price price">￥{{unbalanced_price}}</span>
        </mt-cell>
        <mt-cell title="总金额">
                <span class="all-price price">￥{{all_price/1000}}</span>
        </mt-cell>
        <div class="btn-group">
            <mt-button size="large" type="danger" @click.native="onSettlement">结算当前未结算订单</mt-button>
            <mt-button size="large" plain type="danger" @click.native="loginOut">退出登录</mt-button>
        </div>
        <mt-popup
            v-model="storeListVisible"
            popup-transition="popup-fade">
                <mt-picker :slots="store_list" @change="onStoreChange" value-key='shop_name'></mt-picker>
        </mt-popup>
        <mt-popup
            v-model="statusVisible"
            popup-transition="popup-fade">
                <mt-picker :slots="status_list" @change="onStatusChange" value-key='status'></mt-picker>
        </mt-popup>
        <mt-datetime-picker
        ref="picker"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        hour-format="{value}时"
        minute-format="{value}分"
        :value='isStart?start_time:end_time'
        @confirm="handleConfirm">
        </mt-datetime-picker>
    </div>
</template>
<script>
import cookie from '../cookie'
import {StoreList,orderList,orderModify } from '../api'
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            isStart:true,
            roleinfo:{},
            storeListVisible:false,
            statusVisible:false,
            start_time:new Date((new Date).getTime() - 24*60*60*1000),
            end_time:new Date(),
            order_list:[],
            order_status:'全部',
            status_id:2,
            unbalanced_price:0,
            all_price:0,
            unbalanced_id:[],
            status_list: [
                {
                    flex:1,
                    values:[
                        {status:'全部',id:2},
                        {status:'已结算',id:1},
                        {status:'未结算',id:0}
                    ]
                }
            ],
            store_list: [
                {
                flex: 1,
                values: [
                    {shop_name:'请选择店铺'}
                ],
                }
            ],
            shop_name:"请选择需要查看的商户",
            store_id:null,
            
        }
    },
    created(){
        this.roleinfo = JSON.parse(cookie.get('data','roleinfo'));
        // console.log(this.roleinfo);
        this.getStoreList();
    },
    methods:{
            handleConfirm(value){
                // console.log(value);
                if(this.isStart){
                    this.start_time = value;
                }else{
                    this.end_time = value;
                    if(this.start_time>this.end_time){
                        this.start_time = this.end_time;
                    }
                }
            },
            onStoreChange(picker, values) {
                if(!values[0]) return;
                console.log(values);
                this.shop_name = values[0].shop_name;
                this.store_id = values[0].id;
            },
            onStatusChange(picker,values){
                if(!values[0]) return;
                this.order_status = values[0].status;
                this.status_id = values[0].id;
            },
            getStoreList(){
                const data = {
                    school_id:this.roleinfo.school_id,
                    token:cookie.get('data','token')
                }
                StoreList(data).then(res=>{
                    // console.log(res);
                    this.store_list[0].values = this.store_list[0].values.concat(res.data); 
                    // console.log(this.store_list);
                })
            },
            search(){
                const {store_id,start_time,end_time,status_id} = this;
                if(!store_id){
                    Toast("请选择店铺查询");
                    return;
                }
                const data = {
                    store_id,
                    start_time,
                    end_time,
                    status:status_id,
                    token:cookie.get('data','token')
                }
                orderList(data).then(res=>{
                    console.log(res);
                    this.unbalanced_price = 0;
                    this.all_price = 0;
                    this.unbalanced_id = [];
                    for(let i of res.data){
                        if(!i.financial_status){
                            this.unbalanced_price+=parseFloat(i.goods_price);
                            this.unbalanced_id.push(i.id);
                        }
                        // console.log(this.unbalanced_id);
                        this.all_price+=parseFloat(i.goods_price)*1000;
                    }
                    this.order_list = res.data;
                })
            },
            onSettlement(){
                if(!this.unbalanced_id.length){
                    Toast("暂无可结算订单")
                    return;
                }
                const data = {
                    ids:(this.unbalanced_id).toString(),
                    token:cookie.get('data','token'),
                    school_id:this.roleinfo.school_id
                }
                orderModify(data).then(res=>{
                    if(res.code == 200){
                        Toast("结算成功");
                        this.search()
                    }else{
                        Toast("结算失败，请稍后再试");
                    }
                })
            },
            loginOut(){
                cookie.unsetAll('data');
                this.$router.push('/');
            }
    }
}
</script>
<style scoped>
    .mint-popup{
        border-radius: 0.4rem;
        padding: 1rem;
        overflow: hidden;
    }
    .btn-group{
        text-align: center;
    }
    .btn-group button{
        margin-bottom: 0.6rem;
    }
    .price{
        color: #F23D3D;
        font-weight: bolder;
    }
    .no-data{
        text-align: center;
        padding:0 3rem;
        line-height: 3rem;
        font-size: 0.9rem;
        color: #6b6b6b;
    }
    .line{
        margin: 20px 0;
        line-height: 1px;
        border-left: 150px solid #ddd;
        border-right: 150px solid #ddd;
        text-align: center;
        font-size: 0.7rem;
        color: #6b6b6b;
    }
    .order-content{
        height: Calc(100vh - 28rem);
        overflow: auto;
        padding: 1rem;
    }
    .all-price{
        font-size: 1.5rem;
    }
</style>